<template>
	<view class="content">
		<!-- 导航栏 -->
		<!-- <free-nav-bar  title="消息"></free-nav-bar> -->
		<view class="nav">

		</view>
		<view class="moneyBox">
			<view class="box" style="position: relative;">
				<view>账户余额(元)</view>
				<text class="money" v-if="!detaile">0</text>
				<text class="money" v-else>{{detaile.amount  || 0}}</text>
				<view class="new" v-show="detaile&&detaile.status==1">
					<image src="../../../static/icon/wallet/new.png" mode=""></image>
				</view>
			</view>
			<view class="box">
				<view>累计收益(元)</view>
				<text class="money" v-if="!detaile">0</text>
				<text class="money" v-else>{{detaile.sum}}</text>
			</view>
		</view>
		<view class="center">
			<view class="stream" v-for="(item,index) in to" :key="index">
				<image class="icon" :src="item.src" mode="" @click="fund(item,index)"></image>
				<view class="">{{item.title}}</view>
			</view>
		</view>
		<view class="" v-if="orderList.length>0">
			<view class="list" v-for="(item,index) in orderList ">
				<view class="msg">{{item.name}}</view>
				<view class="state">
					<view :class=" ['iconfont',item.id?'icon-shenhe':'icon-fuwuzhong']"></view>
					<view class="stateTitle">{{item.id?'等待审核':'服务中'}}</view>
				</view>
				<view class="do" :style="style(item)" @click="todo(item)">{{item.id?'催审核':'填报告'}}</view>
			</view>
		</view>
		<view class="none" v-if="!orderList">
			<image src="../../../static/none/order.png" mode="" ></image>
			<view class="">
				暂无订单~
			</view>
		</view>
		<!-- 加载更多 h5端底部导航会遮盖住它 -->
		<view style="background: rgba(216, 216, 216, 0);" v-if="isReachBottom && orderList.length!=0">
			<uni-load-more :status="more" @clickLoadMore="loadMore"></uni-load-more>
		</view>
		
		<!-- 需执行操作的 confirm -->
		<uni-confirm 
		:show="confirmShow"
		:title="confirmTitle" 
		:content="confirmContent"
		:contentColor="contentColor"
		:autoClose="autoClose"
		:cancelText="cancelText"
		:cancelColor='cancelColor'
		:confirmText='confirmText'
		:confirmColor='confirmColor'
		:showCancel='showCancel'
		@cancel="bindBtn('cancel')" 
		@confirm="bindBtn('confirm')">
		</uni-confirm>
		<Model :bol="flag" @handleFlag="handleFlag"></Model>
	</view>
</template>

<script>
	import refresh from '@/components/common/refresh/index.vue';
	import freeNavBar from '@/components/common/nav-bar/free-nav-bar.vue';
	import uniConfirm from '@/components/uni-ui/uni-confirm/uni-confirm.vue'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue';
	import {
		selectWalletInfo,
		selectOrder,
		urgeCheckNursingRecord
	} from '@/apis/wallet/index.js'
	export default {
		data() {
			return {
				flag: false,
				confirmShow:false,
				confirmTitle:'提示',//confirm title
				confirmContent:'',//confirm 内容
				contentColor:'#FF6A00',//confirm 内容颜色
				confirmType:'', // 1未实名 2未认证 3没有密码
				autoClose:false,// confrim点击蒙层可关闭
				cancelColor:'#333333', //取消按钮颜色,
				confirmText:'立即认证',//确定按钮的文字
				confirmColor:'#3c8eff', //确认按钮颜色,
				cancelText:'稍后认证',//取消按钮文字
				showCancel:true ,//是否显示取消按钮
				more: 'loading', //more/loading/noMore
				bol: false,
				pageNum: 1,
				orderList: '', //订单列表
				detaile: null, //钱包基本信息
				isReachBottom: false,
				to: [{
						title: '账户提现',
						src: '../../../static/icon/wallet/tixian.png',
						url: '../../wallet/cash-out/cash-out?amount='
					},
					{
						title: '收支记录',
						src: '../../../static/icon/wallet/shouzhijilu.png',
						url: '../../wallet/purse/purse'
					},
				],
				state: [{
						type: '填报告',
						value: '服务中',
						icon: 'icon-fuwuzhong',
						state: 0
					},
					{
						type: '催审核',
						value: '等待审核',
						icon: 'icon-shenhe',
						state: 1
					},

				],
			}
		},
		onLoad() {

		},
		onShow() {
			this.into()
			this.getOrder()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.isReachBottom = false
			this.pageNum = 1
			this.getOrder()
			this.into()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 页面触底
		onReachBottom() {
			console.log('页面触底了---');
			if (this.more == 'noMore') return;
			this.isReachBottom = true;
			// 显示加载更多数据
			this.more = 'loading';
			this.pageNum++;
			this.getOrder();
		},
		computed: {
			style() {
				return function(item) {
					var color;
					if (item.id) {
						color = `color: #00B7FF;`
					} else if (!item.id) {
						color = `color: #FF6A00;`
					}
					return color
				}
			}
		},
		components: {
			uniLoadMore,
			uniConfirm
		},
		methods: {
			//获取钱包基本信息
			async into() {
				let nurseId = this.$store.state.userInfo.id
				let res = await selectWalletInfo({nurseId})
				this.detaile = res.object
				console.log(this.detaile, '钱包基本信息',nurseId)
				
			},
			//获取订单列表
			async getOrder() {
				let res = await selectOrder({
					pageNum: this.pageNum,
					pageSize: 7
				})
				if (res.success) {
					if (res.object.list.length > 0) {
						if (this.isReachBottom) {
							this.orderList.push(...res.object.list);
						} else {
							this.orderList = res.object.list;
						}
					} else {
						if (this.isReachBottom) {
							this.more = 'noMore';
							this.pageNum = 1;
						} else {
							this.isReachBottom = false;

						}
					}
				}
			},
			//订单操作
			async todo(item) {
				let number = item.number
				if (item.id) {
					let res = await urgeCheckNursingRecord({
						number
					})
					if (res.success) {
						plus.nativeUI.toast('催促成功~')
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '催促成功~'
						// })
					}
				} else if (!item.id) {
					uni.navigateTo({
						url: '../../report/fill-in-report/fill-in-report?number=' + number
					})
				}
			},
			//confirm 确定取消
			async bindBtn(type) {
			    console.log(type)
			    if(type=='confirm'){
					if(this.confirmType==1){
						uni.navigateTo({
							url: '../../../pages/iden/iden/iden?type=0'
						})
					}else if(this.confirmType==2){
						uni.navigateTo({
							url: '../../../pages/iden/iden/iden?type=1'
						})
					}else if(this.confirmType==3){
						uni.navigateTo({
							url: '../../mine/validate/validate?type=7'
						})
					}
			    }else{
					
				}
				this.confirmShow = false
			    this.autoClose=false// confrim点击蒙层可关闭
			    this.showCancel=true //是否显示取消按钮
			},
			handleFlag(value){
			   this.flag =  !!value
			},
			//点击账户提现操作
			async fund(item, index) {
				console.log(this.detaile,'信息')
				// 未登录-直接跳转到登录页面-产品说的……
				if (!this.$store.state.userInfo.id) {
					let res = await this.$store.dispatch('preLogin')
					if (res) {
						uni.navigateTo({
							url: '../../login-register/one-key-login/one-key-login'
						})
					} else {
						uni.navigateTo({
							url: '../../login-register/login/login'
						})
					}
					return
				}
				// ------------
				// if(!this.$store.state.address){
				// 	this.handleFlag(true)
				// 	return
				// }

				// 未实名认证
				if (!this.$store.state.nameStatus) {
					this.confirmContent = '应相关国家规定，为确保平台信息安全，需进行实名认证才可继续！'
					this.confirmType = 1
					this.confirmShow = true
					// uni.showModal({
					// 	title: '提示',
					// 	content: '应相关国家规定，为确保平台信息安全，需进行实名认证才可继续！',
					// 	cancelText: '稍后认证',
					// 	confirmText: '立即认证',
					// 	confirmColor: '#3C8EFF',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: '../../../pages/iden/iden/iden?type=0'
					// 			})
					// 		}
					// 	}
					// })
					return
				}
				// 未职业资格认证
				if (!this.$store.state.attestStatus) {
					this.confirmContent = '应相关国家规定，为确保平台信息安全，需进行执业资格认证才可继续！'
					this.confirmType = 2
					this.confirmShow = true
					// uni.showModal({
					// 	title: '提示',
					// 	content: '应相关国家规定，为确保平台信息安全，需进行执业资格认证才可继续！',
					// 	cancelText: '稍后认证',
					// 	confirmText: '立即认证',
					// 	confirmColor: '#3C8EFF',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: '../../../pages/iden/iden/iden?type=1'
					// 			})
					// 		}
					// 	}
					// })
					return
				}
				if (!this.detaile || !this.detaile.password) {
					this.confirmShow= true
					this.confirmContent = ''
					this.confirmTitle = '请先设置提现密码'
					this.confirmType = 3
					this.autoClose=true,// confrim点击蒙层可关闭
					this.confirmText='去设置'//确定按钮的文字
					this.showCancel=false //是否显示取消按钮
					return
				} 
				if (index == 1) {
					uni.navigateTo({
						url: item.url
					})
				} else {
					uni.navigateTo({
						url: item.url + this.detaile.amount
					})
				}
			}
		},
		loadMore() {
			console.log('加载更多');
		},
		
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		background: url(../../../static/icon/wallet/bc-top.png) #F7F7F7 no-repeat;
		background-size: 100% 448rpx;
	}

	.nav {
		width: 750rpx;
		height: 176rpx;
		// background: rgba(237, 237, 237, 0.9);
		filter: blur(20rpx);
	}

	.moneyBox {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
		box-sizing: border-box;
	}


	.box {
		width: 240rpx;
		height: 130rpx;
		color: rgba(255, 255, 255, 0.7);

	}

	.money {
		font-size: 48rpx;
		font-weight: 400;
		color: #FFFFFF;
		height: 74rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		color: #FFFFFF;
		margin-top: 16rpx;
		display: block;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; //溢出不换行
	}

	.center {
		width: 698rpx;
		height: 182rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 126rpx;
		box-sizing: border-box;
	}

	.stream {
		width: 112rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}

	.icon {
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
		margin-bottom: 16rpx;
	}

	.list {
		width: 698rpx;
		height: 152rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 72rpx 0 24rpx;
		box-sizing: border-box;

	}

	.msg {
		width: 252rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #454545;
		line-height: 40rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 36rpx;
	}

	.state {
		width: 166rpx;
		height: 48rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #454545;
		display: flex;
		margin-right: 64rpx;
	}

	.iconfont {
		// font-size: 36rpx;
		display: inline-block;
		margin-right: 6rpx;
	}

	.stateTitle {
		height: 48rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #454545;
		line-height: 48rpx;
		display: block;
	}

	.do {
		width: 84rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
	}

	.none {
		image {
			width: 442rpx;
			height: 354rpx;
			display: block;
			margin:0 auto;
			display: block;
			margin: 0 auto;
			margin-top:140rpx;
		}

		view {
			font-size: 36rpx;
			font-weight: 500;
			color: #3E3E3E;
			text-align: center;
			margin-top:80rpx;
		}
	}

	.new {
		width: 98rpx;
		height: 46rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 23rpx;
		position: absolute;
		right: -60rpx;
		top: 0;
		text-align: center;

		image {
			width: 64rpx;
			height: 18rpx;
		}
	}
</style>
